<template>
  <Row :gutter="16">
    <List header="ref / refs" border>
      <ListItem>ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素</ListItem>
      <ListItem>如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据</ListItem>
    </List>
    <Divider />
    <div style="height:24px"></div>
    <div>我是子组件</div>
    <component-a ref="children"></component-a>
    <div style="height:24px"></div>
    <div>我是父组件</div>
    <Input v-model="name" />
    <Button @click="changeChildrenValue" type="info" style="margin-top:24px">修改子组件中的值</Button>
  </Row>
</template>
<script>
import componentA from "./children";
export default {
  components: {
    componentA
  },
  data() {
    return {
      name: "我是父组件中的值"
    };
  },
  methods: {
    changeChildrenValue() {
      this.$refs.children.sayHello(this.name);
    }
  }
};
</script>